<template>
  <div class="dt-org-box">
    <div
      :class="{'dt-org-self':true,'dt-org-self-root':nodes.parentId===0,'dt-org-self-total':nodes.totalGroup===1,'dt-org-self-leaf':!nodes.children.length}"
      :top="49">
      <div class="dt-org-line"></div>
      <template>
        <div class="dt-org-title">
          <span :title="nodes.groupName">{{nodes.groupName}}</span>
        </div>
        <div class="dt-org-item">
          <p>群主：
            <template>
              <span :title="masterName">{{masterName}}</span>
            </template>
          </p>
          <p>参与人：
            <template>
              <span :title="parterNames">{{parterNames}}</span>
            </template>
          </p>
        </div>
        <div class="dt-org-add el-dropdown" v-if="createPower">
          <i class="el-icon-plus" @click="showDepart(nodes.id)"></i>
        </div>
        <div class="dt-org-edit" v-if="editPower">
          <i class="el-icon-edit-outline" @click="showEdit(nodes.parentId,nodes.id)"></i>
        </div>
      </template>
    </div>
    <div class="dt-org-children" v-if="nodes.children.length">
      <template>
        <PcComOrgTree v-for="node in nodes.children" :key="node.id" :nodes="node" @showDepart="showDepart" @showEdit="showEdit" />
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: ['nodes'],
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid) //用户id
    }
  },
  computed: {
    createPower() {
      return this.nodes.createPower === 1 && this.nodes.totalGroup !== 1 && this.nodes.groupLevel < 10 //非总群
    },
    editPower() {
      return this.nodes.editPower === 1 && this.nodes.totalGroup !== 1 //非总群
    },
    isCreater() {
      return this.uid == this.nodes.groupUid
    },
    masterName() {
      var arr = this.nodes.userList
        .filter((item) => {
          return item.userRole === 1
        })
        .map((item) => {
          return item.userName
        })
      return arr.join('；')
    },
    parterNames() {
      var arr = this.nodes.userList
        .filter((item) => {
          return item.userRole === 2 || item.userRole === 3
        })
        .map((item) => {
          return item.userName
        })
      return arr.join('；')
    }
  },
  methods: {
    //新建部门群
    showDepart(parentId) {
      this.$emit('showDepart', parentId)
    },
    //编辑总群/部门群
    showEdit(parentId, groupId) {
      this.$emit('showEdit', parentId, groupId)
    },
    //画所有竖线
    drawVerLine() {
      $('.dt-org-line').each(function () {
        var $parentSelf = $(this).parent('.dt-org-self'),
          $parentBox = $parentSelf.parent('.dt-org-box'),
          $prevParentBox = $parentBox.prev('.dt-org-box'),
          $prevParentSelf = $prevParentBox.children('.dt-org-self'),
          $grandSelf = $parentBox.parent('.dt-org-children').prev('.dt-org-self'),
          height = 0,
          top = 0
        if ($prevParentBox[0]) {
          var topLine1 = $prevParentSelf.offset().top + parseInt($prevParentSelf.attr('top')),
            topLine2 = $parentSelf.offset().top + parseInt($parentSelf.attr('top')),
            topBox2 = $parentSelf.offset().top
          height = topLine2 - topLine1
          top = '-' + (topBox2 - topLine1) + 'px'

          $(this).css({
            height: height,
            top: top
          })
        } else {
          if ($grandSelf[0]) {
            var topLine1 = $grandSelf.offset().top + parseInt($grandSelf.attr('top')),
              topLine2 = $parentSelf.offset().top + parseInt($parentSelf.attr('top'))
            height = Math.abs(topLine2 - topLine1)
            top = 49
            $(this).css({
              height: height,
              top: top
            })
          }
        }
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawVerLine()
    })
  }
}
</script>
<style scoped>
::v-deep .dt-org-item p:nth-child(2) {
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .dt-org-self {
  height: 62px;
  background-color: #f0f5ff;
  border-color: #d6e4ff;
  padding-right: 28px;
  width: 276px;
}
::v-deep .dt-org-self.dt-org-self-root,
::v-deep .dt-org-self.dt-org-self-total {
  background-color: #fff;
  border: 1px solid #e9eef7;
}
::v-deep .dt-org-add {
  top: 38px;
}
::v-deep .dt-org-self::before,
::v-deep .dt-org-self::after {
  top: 48px;
}
::v-deep .dt-org-edit {
  position: absolute;
  right: 16px;
  bottom: 14px;
}
::v-deep .dt-org-edit i {
  color: #909399;
}
::v-deep .dt-org-edit:hover i {
  color: #2f54eb;
}
</style>